<template>
  <div style="padding: 25px">
    <el-button @click="dialogFormVisible = true" type="primary" plain>添加影院活动</el-button>
    <template>
      <el-input
        style="width: 20%; margin-left: 830px"
        v-model="search"
        size="mini"
        placeholder="请输入活动标题进行搜索"/>
    </template>

    <el-divider/>

    <el-table
      v-loading="loading"
      :data="list.filter(data => !search || data.title.toLowerCase().includes(search.toLowerCase()))"
      style="width: 100%;"
      height="520">
      <el-table-column
        prop="title"
        label="活动标题">
      </el-table-column>
      <el-table-column
        prop="number"
        label="参加人数"
        sortable>
      </el-table-column>
      <el-table-column
        prop="content"
        width="240"
        label="活动内容"
        :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column
        prop="startTime"
        label="开始时间"
        width="200"
        sortable>
      </el-table-column>
      <el-table-column
        prop="endTime"
        label="结束时间"
        width="200"
        sortable>
      </el-table-column>
      <el-table-column width="200" label="操作">
        <template style="white-space: nowrap" slot-scope="props">
          <el-button
            size="mini"
            icon="el-icon-edit"
            type="primary"
            @click="handleEdit(props.$index, props.row)">修改
          </el-button>
          <el-popconfirm
            confirm-button-text='确定'
            cancel-button-text='不用了'
            icon="el-icon-info"
            icon-color="red"
            @confirm=handleDelete(props.$index)
            title=" 确定要删除此活动吗? "
          >
            <el-button style="margin-left: 10px" size="mini" type="danger" slot="reference" icon="el-icon-delete" plain>删 除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>

    </el-table>

    <el-dialog title="新增活动表单" :visible.sync="dialogFormVisible" @close="handleClose">
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item style="padding-right: 100px" label="开始日期" label-width="120px" prop="startTime">
          <el-date-picker
            v-model="form.startTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="开始日期"
            :picker-options="StartTime"
            >
          </el-date-picker>
        </el-form-item>
        <el-form-item style="padding-right: 100px" label="结束日期" label-width="120px" prop="endTime">
          <el-date-picker
            v-model="form.endTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="结束日期"
            :picker-options="EndTime"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item style="padding-right: 100px" label-width="120px" label="活动标题" prop="title">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item style="padding-right: 100px" label="活动内容" label-width="120px" prop="content">
          <el-input :rows="8" type="textarea" v-model="form.content"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitActivity">确 定 保 存</el-button>
      </div>
    </el-dialog>

    <el-dialog title="影院活动修改" :visible.sync="dialogFormVisible1">
      <el-form ref="form1" :model="form1" :rules="rules">
        <el-form-item style="padding-right: 100px" label="开始日期" label-width="120px" prop="startTime">
          <el-date-picker
            v-model="form1.startTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="开始日期"
            :picker-options="StartTime1"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item style="padding-right: 100px" label="结束日期" label-width="120px" prop="endTime">
          <el-date-picker
            v-model="form1.endTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="结束日期"
            :picker-options="EndTime1"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item style="padding-right: 100px" label-width="120px" label="活动标题" prop="title">
          <el-input v-model="form1.title"></el-input>
        </el-form-item>
        <el-form-item style="padding-right: 100px" label="活动内容" label-width="120px" prop="content">
          <el-input :rows="8" type="textarea" v-model="form1.content"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="submitUpdate()">确 定 保 存</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
  import {CreateActivity, DeleteActivityById, ListAllActivity, UpdateActivity, findActivityById} from "@/api/activity";

  export default {

    data() {
      return {
        rules: {
          startTime: [
            { required: true, message: '请选择活动开始时间！', trigger: 'blur' }
          ],
          endTime: [
            { required: true, message: '请选择活动结束时间！', trigger: 'blur' }
          ],
          title: [
            { required: true, message: '请填写活动标题！', trigger: 'blur' }
          ],
          content: [
            { required: true, message: '请填写活动内容！', trigger: 'blur' }
          ],
        },
        pickerOptions: {
          disabledDate(time) {
              return time.getTime() < Date.now() - 3600 * 1000 * 24;
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '明天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() + 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周后',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        // 时间判断
        StartTime: {
          disabledDate: time => {
            if (this.form.endTime) {
              return (
                time.getTime() > new Date(this.form.endTime).getTime() || time.getTime() < Date.now() - 8.64e7
              )
            } else {
              // 不能小于当前日期
              return time.getTime() < Date.now() - 8.64e7// 加- 8.64e7则表示包当天
            }
          },
        },
        EndTime: {
          disabledDate: time => {
            if (this.form.startTime) {
              return (
                time.getTime() < new Date(this.form.startTime).getTime() - 8.64e7
              )
            } else {
              return time.getTime() < Date.now() - 8.64e7// 加- 8.64e7则表示包当天
            }
          }
        },
        StartTime1: {
          disabledDate: time => {
            if (this.form1.endTime) {
              return time.getTime() > new Date(this.form1.endTime).getTime() || time.getTime() < Date.now() - 8.64e7
            } else {
              // 不能小于当前日期
              return time.getTime() < Date.now() - 8.64e7// 加- 8.64e7则表示包当天
            }
          },
        },
        EndTime1: {
          disabledDate: time => {
            if (this.form1.startTime) {
              return time.getTime() < new Date(this.form1.startTime).getTime()
            } else {
              return time.getTime() < Date.now() - 8.64e7// 加- 8.64e7则表示包当天
            }
          }
        },
        loading: false,
        list: [],
        dialogFormVisible: false,
        dialogFormVisible1: false,
        form: {
          title: '',
          content: '',
          startTime: '',
          endTime: '',
        },
        form1: {
          title: '',
          content: '',
          startTime: '',
          endTime: '',
        },
        search: '',
      }
    },

    mounted() {
      this.loadList();
    },

    methods: {

      loadList() {
        this.loading = true;
        ListAllActivity().then(res => {
          setTimeout(() => {
            this.list = res.data
            this.loading = false
          }, 100)
        })
      },

      submitActivity() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            CreateActivity(this.form).then(res => {
              if (res.success) {
                this.dialogFormVisible = false
                this.$message({
                  type: 'success',
                  message: '影院活动新增成功!'
                });
                this.loadList()
              } else {
                this.$message.error('请先完善表单相关信息！');
                return false;
              }
            })
          }
        });

      },

      submitUpdate() {
        this.$refs.form1.validate((valid) => {
          if (valid) {
            UpdateActivity(this.form1).then(res => {
              if (res.success) {
                this.dialogFormVisible1 = false;
                this.$message({
                  message: '影院活动修改成功！',
                  type: 'success',
                });
              }
              this.loadList()
            })
          }
        });
      },

      handleDelete(index) {
        DeleteActivityById(this.list[index].id).then(res => {
          if (res.success) {
            this.list.slice(index, 1)
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.loadList()
          }
        })
      },

      handleEdit(index, row) {
        this.dialogFormVisible1 = true;
        findActivityById(row.id).then(res => {
          this.form1 = res.data;
        })
      },

      handleClose(){
        this.$refs.form.resetFields();
      },

    },

  }
</script>

<style>
  .el-tooltip__popper {
    max-width: 60% !important;
  }
  .el-tooltip__popper,
  .el-tooltip__popper.is-dark {
    max-width: 60% !important;
    line-height: 24px;
    color: #fff !important;
    background-color: #4B4453 !important;
  }
</style>
